<script setup lang="ts">
import { RouterLink, RouterView } from "vue-router";
import SideBar from "./components/SideBar.vue";
import Header from "./components/Header.vue";
import FooTer from "./components/FooTer.vue";

// var a = document.createElement('style');
// 			a.innerHTML = `html{background-color:#fff;filter: invert(1);}img{filter:invert(1)}`;
// 			document.head.appendChild(a)

</script>

<template>
	<div class="app">
		<header>

			<Header />
		</header>
		<main>
			<section class="left">
				<RouterView />
			</section>
			<section class="card">
				<SideBar />
			</section>
			<el-backtop />
		</main>
		<footer>
			<FooTer />
		</footer>
	</div>
</template>

<style scoped lang="scss">


header {
	height: 10%;
}

main {
	/* height: 80%; */
	min-height: 80vh;
	width: 70%;
	margin: 1% auto;
	display: flex;
	justify-content: space-between;

	.left {
		margin: 10px auto;
	}

	>section:nth-child(1) {
		width: 78%;

		.box-card {
			margin: 20px auto;
			background: var(--vt-c-text);
		}
	}

	>section:nth-child(2) {
		width: 20%;
		height: 100%;
	}
}

footer {
	height: 10%;
}

@media screen and (max-width: 800px) {

	main {
		width: 97%;

		.card {
			display: none;
		}

		>section:nth-child(1) {
			width: 100%;
		}

		>section:nth-child(2) {
			width: 0%;
		}
	}
}

@media screen and (max-width: 1200px) and (min-width: 800px) {

	main {
		width: 95%;

		.card {
			display: none;
		}

		>section:nth-child(1) {
			width: 100%;
		}

		>section:nth-child(2) {
			width: 0%;
		}
	}
}

@media screen and (min-width: 1200px) {

	main {
		width: 70%;
	}
}</style>
